<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
    <h1>cors跨域</h1>
    <button id="btn">发送请求</button>
    <script>
        /* 
        ajax请求分为简单请求和复杂请求:
         简单请求:
            -get和post请求默认都属于简单请求
            -并且http的头部信息中不能出现超出以下字段
                -Accept
                -Accept-language
                -Content-Type:值只能是 'application/x-www-form-urlencoded'
         复杂请求:
            -不属于简单请求的,都称为复杂请求
            -put和delete都属于复杂请求
            -只要添加额外请求头的也属于复杂请求

        复杂请求在跨域的情况下,会先发送一个空的body的OPTIONS预检请求(查看服务器的权限信息)
        */
        const oBtn = document.getElementById('btn');
        const myAxios = axios.create({
            baseURL: "http://127.0.0.1:8550",
            timeout: 10000,
            headers: {
                token: "asjdlakjdalsdjasld"
            }
        })
        oBtn.onclick = async function () {
            const re = await myAxios.get("http://127.0.0.1:8550/userInfo", {
                params: {
                    userId: "001"
                }
            })

            console.log(re);
        }
    </script>
</body>

</html>